<template>
  <div class="tableList">
    <table border="0" cellspacing="0" cellpadding="0" class="table">
      <thead class="thead">
        <th>提交时间</th>
        <th>所属项目</th>
        <th>隐患详情</th>
        <th>隐患位置</th>
        <th>上传人</th>
        <th>操作</th>
      </thead>
      <tbody v-if="this.$store.state.danger.total" class="tbody">
        <tr v-for="item in this.$store.state.danger.dangerList" :key="item.safeId">
          <td>{{ item.uploadTime | dateFormat}}</td>
          <td>{{ item.projectName }}</td>
          <td class="content">{{ formatContent(item.safeContent) }}</td>
          <td>{{ item.safeAd }}</td>
          <td>{{ item.username }}</td>
          <td class="btnGroup">
            <el-button @click="view(item.safeId)" type="text" size="small">查看详情</el-button>
            <el-button @click="hideOrShow(item)" type="text" size="small" v-if="item.isShow===0">隐藏</el-button>
            <el-button @click="hideOrShow(item)" type="text" size="small" v-if="item.isShow===1">显示</el-button>
            <el-button
              @click="deleteInfo(item)"
              type="text"
              size="small"
              style="color:red"
              v-if="item.isShow===0"
            >删除</el-button>
          </td>
        </tr>
      </tbody>
    </table>
    <drawer ref="drawerRef"></drawer>
    <delete-alert-box
    v-if="isDelete"
    :isDelete=isDelete
    :descTips=descTips
    @Confirm=Confirm
    @Cancel=Cancel
    ></delete-alert-box>
    <div class="block" v-if="this.$store.state.danger.total">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="this.$store.state.danger.total"
      ></el-pagination>
    </div>
    <empty calss="empty" v-if="!this.$store.state.danger.total"></empty>
  </div>
</template>
<script>
import drawer from '../components/drawer'
import empty from '../../../components/empty'
import { hideDangerContent, deleteDangerContent } from '../../../api/danger'
import moment from 'moment'
export default {
  data () {
    return {
      currentPage: 1,
      pageIndex: 1,
      isDelete: false,
      descTips: [],
      safeId: ''
    }
  },
  methods: {
    Confirm () {
      deleteDangerContent(this.safeId).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.isDelete = false
          this.getTable()
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    Cancel () {
      this.isDelete = false
    },
    async getTable () {
      await this.$store.dispatch('danger/getList', this.pageIndex)
    },
    handleCurrentChange (val) {
      // console.log(val)
      this.currentPage = val
      this.pageIndex = val
      this.getTable()
    },
    formatContent (value) {
      if (value === '') {
        return '-'
      } else return value
    },
    view (safeId) {
      this.$refs.drawerRef.openDrawer(safeId)
    },
    hideOrShow (item) {
      hideDangerContent(item.safeId, item.isShow).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.getTable()
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    deleteInfo (item) {
      // console.log(item)
      this.isDelete = true
      this.safeId = item.safeId
      this.descTips = [{
        tips: '确定删除此隐患详情？',
        default: ''
      }]
      // this.$refs.deleteDialogRef.openDialog(safeId)
    }
  },
  components: {
    drawer,
    empty
  },
  filters: {
    dateFormat: function (dateStr) {
      return moment(dateStr).format('YYYY-MM-DD HH:mm')
    }
  }
}
</script>
<style scoped lang="scss">
.tableList {
  .table {
    width: 100%;
    margin-top: 20px;
    background-color: #fff;
      .thead {
        background: rgba(87, 131, 255, 0.05);
        font-size: 14px;
        font-weight: 500;
        color: #333333;
      th {
        height: 60px;
        line-height: 60px;
        text-align: left;
        padding-left: 24px;
        border-bottom: 1px solid #e6e6e6;
      }
    }
    .tbody {
      height: calc(100% - 60px);
      tr {
        height: 64px;
        td {
          max-width: 200px;
          text-overflow: ellipsis;
          overflow: hidden;
          text-align: left;
          padding-left: 24px;
          border-bottom: rgba(242, 242, 242, 1) 1px solid;
        }
        .content {
          overflow: hidden;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
        }
        .btnGroup {
          button {
            color: #4868ff;
            text-decoration: underline;
            font-weight: 500;
            font-size: 14px;
          }
        }
      }
    }
  }
    .block {
      padding: 24px 0;
      margin-right: 28px;
      overflow: hidden;
      ::v-deep .el-pagination{
        float: right;
      }
    }
  .empty {
    margin: 0 auto;
    margin-top: 50px;
  }
}
</style>
